@charset "utf-8";
//--------------------------@mixin 复用代码---------------------------

// flex盒子模型
@mixin flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -moz-box;
  display: flex;
}

// flex空间分配
@mixin flex-space {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}

// flex居中
@mixin flex-align-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}

// 默认动画
@mixin animate-default {
  -webkit-transition: all .3s cubic-bezier(.4,0,.2,1);
  -o-transition: all .3s cubic-bezier(.4,0,.2,1);
  transition: all .3s cubic-bezier(.4,0,.2,1);
}

// 绝对定位居中 translate方法
@mixin abs-position($top, $left, $x, $y) {
  position: absolute;
  top: $top;
  left: $left;
  transform: translate($x, $y);
  -webkit-transform: translate($x, $y);
  -moz-transform: translate($x, $y);
  -ms-transform: translate($x, $y);
  -o-transform: translate($x, $y);
}

// 根据给定宽度描绘
@mixin border-box {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

// 透明度 -隐藏
@mixin opacity-hidden {
  opacity: 0;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
}

// 透明度 -显示
@mixin opacity-show {
  opacity: 1;
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
}

// bg图片 -公用
@mixin bg-img($url, $size, $position, $repeat) {
  background-image: $url;
  background-size: $size;
  background-position: $position;
  background-repeat: $repeat;
}

//超出部分省略号
@mixin ellipsis {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

// 边框阴影 ...表示不确定个数
@mixin box-shadow($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

//--------------------------@extend 继承代码---------------------------
































